<template>
  <div>
    <div>
      <van-cell title="历史记录">
        <span class="alldel" v-if="deleteShow" @click="$emit('deleteAll')"
          >全部删除</span
        >
        <span v-if="deleteShow" @click="deleteShow = !deleteShow">完成</span>
        <template #right-icon>
          <van-icon
            v-if="!deleteShow"
            name="delete"
            class="search-icon"
            @click="deleteShow = !deleteShow"
          />
        </template>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in searchHistoryList"
        :key="index"
        @click="deleteFn(index)"
      >
        <template #right-icon>
          <van-icon name="close" class="search-icon" v-if="deleteShow" />
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    searchHistoryList: Array,
  },
  data() {
    return {
      deleteShow: false,
    };
  },
  methods: {
    // //删除当前选中的
    // deleteFn(index) {
    //   this.searchHistoryList.splice(index, 1);
    // },
    // //删除全部
    // alldeleteFn() {
    //   this.searchHistoryList = [];
    //   //把本地缓存全部清空
    //   setItem("SEARCHHISTORY", "");
    // },
    deleteFn(index) {
      // 判断是不是删除状态
      //如果是，点击直接删除这条数据
      //不是，打开搜索结果页面，并对当前数据进行存储
      if (this.deleteShow) {
        this.searchHistoryList.splice(index, 1);
      } else {
        this.$emit("openresult", this.searchHistoryList[index]);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 40px;
  line-height: inherit;
}
.alldel {
  margin-right: 20px;
}
</style>
